<template>
  <view class="home-container">
    <!-- 图片区域 -->
    <image
        src="/static/tp/tp1.png"
        class="home-image"
        width="100%"
        height="100%"
        mode="aspectFit"
    />

    <!-- 新增：跳过倒计时按钮 -->
    <view class="skip-container" @click="skipToAnotherPage">
      <text v-if="countDown > 0">跳过 {{ countDown }}s</text>
      <text v-else>跳过</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      countDown: 5, // 倒计时初始值（5秒）
      timer: null // 定时器对象
    };
  },
  onLoad() {
    // 页面加载时启动倒计时
    this.startCountDown();
  },
  onUnload() {
    // 页面卸载时清除定时器，避免内存泄漏
    if (this.timer) clearInterval(this.timer);
  },
  methods: {
    // 启动倒计时
    startCountDown() {
      this.timer = setInterval(() => {
        this.countDown--;
        // 倒计时结束自动跳转
        if (this.countDown <= 0) {
          this.skipToAnotherPage();
        }
      }, 1000); // 每秒执行一次
    },
    // 跳过按钮点击事件：跳转到另一个页面
    skipToAnotherPage() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      // 修改跳转路径为 di2.vue 所在页面
      uni.navigateTo({
        // 原路径：url: '/pages/index/index'
        url: '/pages/index/shou_ye/di2'
      });
    }
  }
};
</script>

<style>
/* ... 原有样式保持不变 ... */

/* 新增：跳过按钮样式 */
.skip-container {
  position: fixed; /* 固定定位，不受页面滚动影响 */
  top: 100rpx; /* 距离顶部 20rpx */
  right: 20rpx; /* 距离右侧 20rpx */
  padding: 10rpx 20rpx;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  color: white; /* 白色文字 */
  border-radius: 30rpx; /* 圆角 */
  font-size: 28rpx;
  z-index: 9999; /* 确保在最上层显示 */
}
.home-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

.home-image {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}
</style>